// 页面查看
<template>
	<div class="hello">
		<el-container v-loading="loading" element-loading-text="模板加载中">
			<el-header>
				<span class="title">{{ tem_name || "模板设计" }}</span>
				<el-button @click="close">关闭</el-button>
				<el-button @click="saveTemplate">保存</el-button>
			</el-header>
			<el-main>
				<div class="left">
					<div
						class="main"
						:style="{ width: page.width + 'mm', height: page.height + 'mm' }"
					>
						<newDrag
							:orderlistProps="orderlistProps"
							:goodslistProps="goodslistProps"
							:countlistProps="countlistProps"
							:signlistProps="signlistProps"
							:mainlistProps="mainlistProps"
							:key="timer"
							ref="newDrag"
						></newDrag>
					</div>
				</div>
				<div class="right">
					<div class="item">
						<div class="item-title">
							<i class="el-icon-setting"></i>
							模板设置
						</div>
						<div class="item-main page">
							<ul>
								<li>
									<span class="page-item-title">模板名称:</span>
									<div class="page-item-content">
										<el-input
											placeholder="请输入内容"
											size="mini"
											v-model="template.tem_name"
											style="width: 150px"
											@change="pageSizeSet"
										></el-input>
									</div>
								</li>
								<li>
									<span class="page-item-title">type:</span>
									<div class="page-item-content">
										<el-input
											placeholder="请输入内容"
											size="mini"
											v-model="template.type"
											style="width: 150px"
											@change="pageSizeSet"
										></el-input>
									</div>
								</li>
								<li>
									<span class="page-item-title">remark:</span>
									<div class="page-item-content">
										<el-input
											placeholder="请输入内容"
											size="mini"
											v-model="template.remark"
											style="width: 150px"
											@change="pageSizeSet"
										></el-input>
									</div>
								</li>
								<li>
									<span class="page-item-title">temp_id:</span>
									<div class="page-item-content">
										<el-input
											placeholder="请输入内容"
											size="mini"
											v-model="template.temp_id"
											style="width: 150px"
											@change="pageSizeSet"
										></el-input>
									</div>
								</li>
								<li>
									<span class="page-item-title">template_id:</span>
									<div class="page-item-content">
										<el-input
											placeholder="请输入内容"
											size="mini"
											v-model="template.template_id"
											style="width: 150px"
											@change="pageSizeSet"
										></el-input>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="item">
						<div class="item-title">
							<i class="el-icon-setting"></i>
							打印设置
						</div>
						<div class="item-main page">
							<ul>
								<li>
									<span class="page-item-title"
										>每页显示行数
										<el-tooltip
											class="item"
											effect="dark"
											content="当输入显示的行数过大时，则默认换到下一页"
											placement="top-start"
										>
											<i class="el-icon-question"></i> </el-tooltip
										>:</span
									>
									<div class="page-item-content">
										<el-input
											placeholder="请输入内容"
											size="mini"
											v-model="printSetting.lineNumber"
											style="width: 150px"
											@change="pageSizeSet"
										></el-input>
									</div>
								</li>
								<li>
									<span class="page-item-title">上边距:</span>
									<div class="page-item-content">
										<el-input
											placeholder="请输入内容"
											size="mini"
											v-model="printSetting.topMargin"
											style="width: 150px"
										></el-input>
									</div>
									<span class="page-item-title">左边距:</span>
									<div class="page-item-content">
										<el-input
											placeholder="请输入内容"
											size="mini"
											v-model="printSetting.leftMargin"
											style="width: 150px"
										></el-input>
									</div>
								</li>
								<li>
									<span class="page-item-title"
										>打印预览<el-tooltip
											class="item"
											effect="dark"
											content="默认关闭，开启后每次打印则会先预览样式。"
											placement="top-start"
										>
											<i class="el-icon-question"></i>:</el-tooltip
										></span
									>
									<div class="page-item-content">
										<el-checkbox v-model="printSetting.isShow"></el-checkbox>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<!-- 纸张设置 -->
					<div class="item">
						<div class="item-title">
							<i class="el-icon-setting"></i>
							纸张设置
						</div>
						<div class="item-main page">
							<ul>
								<li>
									<span class="page-item-title">多联纸:</span>
									<div class="page-item-content">
										<el-radio-group
											v-model="page.quota"
											size="mini"
											@change="quotaSet"
										>
											<el-radio-button label="1">一等份</el-radio-button>
											<el-radio-button label="2">二等份</el-radio-button>
											<el-radio-button label="3">三等份</el-radio-button>
										</el-radio-group>
									</div>
								</li>
								<li>
									<span class="page-item-title">其他常用纸:</span>
									<div class="page-item-content">
										<el-radio-group
											v-model="page.pageType"
											size="mini"
											@change="pageTypeChange"
										>
											<el-radio-button label="A4纸"></el-radio-button>
											<el-radio-button label="A5纸"></el-radio-button>
											<el-radio-button label="A6纸"></el-radio-button>
										</el-radio-group>
									</div>
								</li>

								<li>
									<span class="page-item-title">顶部标题:</span>
									<div class="page-item-content">
										<el-input
											placeholder="请输入内容"
											size="mini"
											style="width: 300px"
											v-model="page.headerTitle"
										></el-input>
									</div>
								</li>
								<li>
									<span class="page-item-title"
										>纸张宽度<el-tooltip
											class="item"
											effect="dark"
											content="自定义打印纸张的大小，请谨慎修改"
											placement="top-start"
										>
											<i class="el-icon-question"></i> </el-tooltip
										>:</span
									>
									<div class="page-item-content">
										<el-input
											placeholder="请输入内容"
											size="mini"
											v-model="page.width"
											style="width: 120px"
										></el-input>
									</div>
									<span class="page-item-title">纸张高度:</span>
									<div class="page-item-content">
										<el-input
											placeholder="请输入内容"
											size="mini"
											v-model="page.height"
											style="width: 150px"
										></el-input>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<!-- 订单信息 -->
					<div class="item">
						<div class="item-title">
							<i class="el-icon-setting"></i>
							订单信息
						</div>
						<div class="item-main header-info">
							<div>
								<el-checkbox-group v-model="orderType" @change="selectorder">
									<el-checkbox
										v-for="item in orderMenuList"
										:key="item.index"
										:label="item.index"
										border
										size="mini"
										>{{ item.label }}</el-checkbox
									>
								</el-checkbox-group>
							</div>
							<div class="main—info-defind">
								<el-input
									class="input-new-tag"
									v-if="orderinputVisible"
									v-model="orderinputValue"
									ref="ordersaveTagInput"
									size="small"
									@keyup.enter.native="handleInputConfirm('order')"
									@blur="handleInputConfirm('order')"
								>
								</el-input>
								<el-button
									v-else
									class="button-new-tag"
									size="small"
									@click="showInput('order')"
									>+ 输入自定义空列</el-button
								>
							</div>
							<FontSet
								:fontset="orderFontSet"
								@getdata="(data) => getdata(data, 'order')"
							></FontSet>
						</div>
					</div>
					<!-- 商品信息 -->
					<div class="item">
						<div class="item-title">
							<i class="el-icon-setting"></i>
							商品信息
						</div>
						<div class="item-main main-info">
							<div>
								<el-checkbox-group v-model="goodsType" @change="selectgoods">
									<el-checkbox
										v-for="item in goodsMenuList"
										:key="item.index"
										:label="item.index"
										border
										size="mini"
										>{{ item.label }}</el-checkbox
									>
								</el-checkbox-group>
							</div>

							<div class="main—info-defind">
								<el-input
									class="input-new-tag"
									v-if="goodsinputVisible"
									v-model="goodsinputValue"
									ref="goodssaveTagInput"
									size="small"
									@keyup.enter.native="handleInputConfirm('goods')"
									@blur="handleInputConfirm('goods')"
								>
								</el-input>
								<el-button
									v-else
									class="button-new-tag"
									size="small"
									@click="showInput('goods')"
									>+ 输入自定义空列</el-button
								>
							</div>
							<FontSet
								:fontset="goodsFontSet"
								@getdata="(data) => getdata(data, 'goods')"
							></FontSet>
						</div>
					</div>
					<!-- 合计信息 -->
					<div class="item">
						<div class="item-title">
							<i class="el-icon-setting"></i>
							合计信息
						</div>
						<div class="item-main footer-info">
							<div>
								<el-checkbox-group v-model="countType" @change="selectcount">
									<el-checkbox
										v-for="item in countList"
										:key="item.index"
										:label="item.index"
										border
										size="mini"
										>{{ item.label }}</el-checkbox
									>
								</el-checkbox-group>
							</div>
							<div class="main—info-defind">
								<el-input
									class="input-new-tag"
									v-if="countinputVisible"
									v-model="countinputValue"
									ref="countsaveTagInput"
									size="small"
									@keyup.enter.native="handleInputConfirm('count')"
									@blur="handleInputConfirm('count')"
								>
								</el-input>
								<el-button
									v-else
									class="button-new-tag"
									size="small"
									@click="showInput('count')"
									>+ 输入自定义空列</el-button
								>
							</div>
							<FontSet
								:fontset="countFontSet"
								@getdata="(data) => getdata(data, 'count')"
							></FontSet>
						</div>
					</div>
					<!-- 签字信息 -->
					<div class="item">
						<div class="item-title">
							<i class="el-icon-setting"></i>
							签字信息
						</div>
						<div class="item-main footer-info">
							<div>
								<el-checkbox-group v-model="signType" @change="selectsign">
									<el-checkbox
										v-for="item in signList"
										:key="item.index"
										:label="item.index"
										border
										size="mini"
										>{{ item.label }}</el-checkbox
									>
								</el-checkbox-group>
							</div>
							<div class="footer—info-defind">
								<el-input
									class="input-new-tag"
									v-if="signinputVisible"
									v-model="signinputValue"
									ref="signsaveTagInput"
									size="small"
									@keyup.enter.native="handleInputConfirm('sign')"
									@blur="handleInputConfirm('sign')"
								>
								</el-input>
								<el-button
									v-else
									class="button-new-tag"
									size="small"
									@click="showInput('sign')"
									>+ 输入自定义空列</el-button
								>
							</div>
							<FontSet
								:fontset="signFontSet"
								@getdata="(data) => getdata(data, 'sign')"
							></FontSet>
						</div>
					</div>
					<!-- <div class="item">
            <div class="item-title"></div>
            <div class="button">
              <el-button size="medium" @click="saveTemplate" type="primary"
                >保存</el-button
              >
              <el-button size="medium " @click="saveTemplate" type="danger"
                >取消</el-button
              >
            </div>
          </div> -->
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	// 局部字体设置组件
	import FontSet from "@/components/FontSet/FontSet";
	// 拖拽组件
	import newDrag from "./newDrag";

	// 请求数据
	import { save_order_print_ceshi } from "@/api/global/globalPrint";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";

	export default {
		name: "HelloWorld",
		components: {
			FontSet,
			newDrag,
		},
		data() {
			return {
				// 模板设置
				template: {
					tem_name: "",
					type: 2,
					remark: "",
					temp_id: "",
					template_id: "",
				},

				tem_name: "",
				id: this.$route.query.id,
				tem_id: this.$route.query.tem_id,
				loading: false,
				timer: "",
				// 打印设置
				printSetting: {
					lineNumber: 10,
					topMargin: 15,
					leftMargin: 10,
					isShow: false,
				},
				// 纸张设置
				page: {
					width: 210,
					height: 297,
					pageType: "A4纸",
					quota: "", //等份
					templateType: "3", //模板类型
					headerTitle: "配送单",
					topMargin: 60,
					bottomMargin: 30,
					userDefind: "1", //1.单排自定义，2.双排固定
				},
				// 订单信息
				orderMenuList: [],
				orderMenuListProps: [],
				orderType: [],
				orderinputVisible: false,
				orderinputValue: "",
				orderFontSet: {
					fontSize: "14",
					bold: false,
					underline: false,
					italic: false,
					textAlign: "center",
				},
				// 商品信息
				goodsMenuList: [],
				goodsMenuListProps: [],
				goodsType: [],
				goodsinputVisible: false,
				goodsinputValue: "",
				goodsFontSet: {
					fontSize: "14",
					bold: false,
					underline: false,
					italic: false,
					textAlign: "center",
				},
				// 合计信息
				countList: [],
				countListProps: [],
				countType: [],
				countinputVisible: false,
				countinputValue: "",
				countFontSet: {
					fontSize: "14",
					bold: false,
					underline: false,
					italic: false,
					textAlign: "center",
				},
				// 签字信息
				signList: [],
				signListProps: [],
				signType: [],
				signUserDefind: [],
				signinputVisible: false,
				signinputValue: "",
				signFontSet: {
					fontSize: "14",
					bold: false,
					underline: false,
					italic: false,
					textAlign: "center",
				},
				// 全局信息
				mainlistProps: {
					title: {
						id: 1,
						typename: "title",
						top: 0,
						left: 0,
						bottom: 0,
					},
					orderlist: {
						id: 2,
						typename: "orderlist",
						top: 0,
						left: 0,
						bottom: 0,
					},
					goodslist: {
						id: 3,
						typename: "goodslist",
						top: 150,
						left: 0,
						bottom: 0,
					},
					countlist: {
						id: 4,
						typename: "countlist",
						top: 0,
						left: 0,
						bottom: 0,
					},
					signlist: {
						id: 5,
						typename: "signlist",
						top: 0,
						left: 0,
						bottom: 0,
					},
				},
				// 商品信息自定义空列
				goodsUserDefind: [],
			};
		},
		computed: {
			// 订单信息
			orderlistProps() {
				return this.sort(this.orderMenuListProps, this.orderType);
			},
			// 商品信息
			goodslistProps() {
				return this.sort(this.goodsMenuListProps, this.goodsType).concat(
					this.goodsUserDefind
				);
			},
			// 合计信息
			countlistProps() {
				return this.sort(this.countListProps, this.countType);
			},
			// 签字信息
			signlistProps() {
				return this.sort(this.signListProps, this.signType).concat(
					this.signUserDefind
				);
			},
		},
		created() {},
		methods: {
			del() {
				console.log(23123123);
			},

			// 筛选选中的项
			sort(list, selectList) {
				let arr = [];
				list.map((e) => {
					selectList.map((p) => {
						if (e.index == p) {
							arr.push(e);
						}
					});
				});
				return arr;
			},
			// 纸张型号设置
			pageTypeChange(e) {
				this.timer = new Date().getTime();
				this.page.quota = "";
				if (e === "A4纸") {
					this.page.width = 210;
					this.page.height = 297;
				} else if (e === "A5纸") {
					this.page.width = 148;
					this.page.height = 210;
				} else if (e === "A6纸") {
					this.page.width = 105;
					this.page.height = 148;
				}
			},
			// 纸张大小自定义设置
			pageSizeSet() {
				this.page.pageType = "自定义";
			},
			// 纸张等份设置
			quotaSet(e) {
				this.timer = new Date().getTime();
				this.page.pageType = "";
				this.page.quota = e;
				switch (e) {
					case "1":
						this.page.width = 241;
						this.page.height = 280;
						break;
					case "2":
						this.page.width = 241;
						this.page.height = 140;
						break;
					case "3":
						this.page.width = 241;
						this.page.height = 93;
						break;
				}
			},
			// 获取fontSET子组件数据
			getdata(data, type) {
				switch (type) {
					case "order":
						this.orderFontSet = data;
						break;
					case "goods":
						this.goodsFontSet = data;
						break;
					case "count":
						this.countFontSet = data;
						break;
					case "sign":
						this.signFontSet = data;
						break;
				}
			},

			selectorder(val) {
				this.orderMenuListProps = this.selectMethod(
					val,
					this.orderMenuList,
					this.orderMenuListProps
				);
			},
			selectgoods(val) {
				this.goodsMenuListProps = this.selectMethod(
					val,
					this.goodsMenuList,
					this.goodsMenuListProps
				);
			},
			selectcount(val) {
				this.countListProps = this.selectMethod(
					val,
					this.countList,
					this.countListProps
				);
			},
			selectsign(val) {
				this.signListProps = this.selectMethod(
					val,
					this.signList,
					this.signListProps
				);
			},
			// 选中添加
			selectMethod(val, menu, props) {
				let newarr = [];
				menu.map((item) => {
					val.forEach((element) => {
						if (item.index == element) {
							newarr.push(item);
						}
					});
				});
				let diff = [];
				newarr.forEach((data) => {
					if (props.every((meber) => meber.index !== data.index)) {
						diff.push(data);
					}
				});
				return props.concat(diff);
			},
			// 保存模板
			saveTemplate() {
				// 模板数据  tempalteString
				let temp_string = {
					orderMenuList: this.orderMenuList,
					goodsMenuList: this.goodsMenuList,
					countList: this.countList,
					signList: this.signList,
				};
				// 打印和纸张设置
				let printSetData = {
					printSetting: this.printSetting,
					page: this.page,
				};
				// 订单设置
				let orderSetData = {
					orderlist: this.$refs.newDrag.orderlist,
					selectType: this.orderType,
					fontset: this.orderFontSet,
				};
				// 商品信息设置
				let goodsSetData = {
					goodslist: this.$refs.newDrag.goodslist,
					selectType: this.goodsType,
					fontset: this.goodsFontSet,
					goodsUserDefind: this.goodsUserDefind,
				};
				// 合计信息
				let countSetData = {
					countlist: this.$refs.newDrag.countlist,
					selectType: this.countType,
					fontset: this.countFontSet,
				};
				// 签字信息设置
				let signSetData = {
					signlist: this.$refs.newDrag.signlist,
					selectType: this.signType,
					fontset: this.signFontSet,
					signUserDefind: this.signUserDefind,
				};
				let mainSetData = {
					mainlist: this.$refs.newDrag.mainlist,
				};
				// 数据汇总
				let allData = {
					orderSetData,
					goodsSetData,
					countSetData,
					signSetData,
					mainSetData,
				};
				let print_settings = JSON.stringify(printSetData);
				let main_settings = JSON.stringify(allData);
				let data = Object.assign(
					apiUrl().name,
					{
						tem_name: this.template.tem_name,
						type: this.template.type,
						remark: this.template.remark,
						temp_string: JSON.stringify(temp_string),
						temp_id: this.template.temp_id,
						template_id: this.template.template_id,
						print_settings: print_settings,
						main_settings: main_settings,
					}
				);
				save_order_print_ceshi(data)
					.then((res) => {
						if (res.errcode == 0) {
							this.$message.success("修改模板成功");
						}
					})
					.catch(() => {
						this.$message.error("修改模板失败");
					});
			},
			// 表头保存
			saveDefaultHeader() {
				let orderMenuList = this.orderMenuList,
					goodsMenuList = this.goodsMenuList,
					countList = this.countList,
					signList = this.signList;
				let obj = {
					orderMenuList,
					goodsMenuList,
					countList,
					signList,
				};
			},
			// 关闭
			close() {
				window.close();
			},
			/* element 标签的原生事件 勿删 */
			handleClose(tag, type) {
				switch (type) {
					case "sign":
						this.signUserDefind.splice(this.signUserDefind.indexOf(tag), 1);
						break;
					case "goods":
						this.goodsUserDefind.splice(this.goodsUserDefind.indexOf(tag), 1);
						break;
				}
			},

			showInput(type) {
				switch (type) {
					case "sign":
						this.signinputVisible = true;
						this.$nextTick(() => {
							this.$refs.signsaveTagInput.$refs.input.focus();
						});
						break;
					case "goods":
						this.goodsinputVisible = true;
						this.$nextTick(() => {
							this.$refs.goodssaveTagInput.$refs.input.focus();
						});
						break;
					case "count":
						this.countinputVisible = true;
						this.$nextTick(() => {
							this.$refs.countsaveTagInput.$refs.input.focus();
						});
						break;
					case "order":
						this.orderinputVisible = true;
						this.$nextTick(() => {
							this.$refs.ordersaveTagInput.$refs.input.focus();
						});
						break;
				}
			},

			handleInputConfirm(type) {
				let data = {
					index: "",
					label: "",
					disabled: true,
					top: 0,
					left: 0,
				};
				switch (type) {
					case "order":
						if (this.orderinputValue) {
							data.label = this.orderinputValue;
							data.index = this.orderMenuList.length + 1;
							this.orderinputValue = "";
							this.orderinputVisible = false;
							this.orderMenuList.push(data);
						}
						break;
					case "goods":
						if (this.goodsinputValue) {
							data.label = this.goodsinputValue;
							data.index = this.goodsMenuList.length + 1;
							this.goodsinputValue = "";
							this.goodsinputVisible = false;
							this.goodsMenuList.push(data);
						}
						break;
					case "count":
						if (this.countinputValue) {
							data.label = this.countinputValue;
							data.index = this.countList.length + 1;
							this.countinputValue = "";
							this.countinputVisible = false;
							this.countList.push(data);
						}
						break;
					case "sign":
						if (this.signinputValue) {
							data.label = this.signinputValue;
							data.index = this.signList.length + 1;
							this.signinputValue = "";
							this.signinputVisible = false;
							this.signList.push(data);
						}
						break;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
$main-color1: #009688; //主体颜色

li {
	list-style: none;
}

// 头部
.el-header {
	height: 60px;
	background-color: $main-color1;
	display: flex;
	align-items: center;

	.title {
		display: block;
		flex: 1;
		font-size: 24px;
		color: #fff;
	}
}

// 主体布局
.el-main {
	display: flex;
	flex-direction: row;
	background-color: #ccc;
	margin: 0;
	padding: 0;

	.left {
		flex: 1;
		height: calc(100vh - 60px);
		overflow: auto;
		display: flex;
		justify-content: center;

		.main {
			margin-top: 100px;
			margin-bottom: 100px;
			position: relative;
			background-color: #fff;
		}
	}

	.right {
		height: calc(100vh - 60px);
		overflow: auto;
		width: 500px;
		background-color: #fff;
		padding-bottom: 50px;
		border-bottom: 1px solid $main-color1;
		box-sizing: border-box;
	}
}

// 右边主体布局
.item-title {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid $main-color1;
	padding: 10px 15px;
	font-size: 16px;
	color: #000;
	font-weight: 700;
}

// 纸张设置
.page {
	padding: 0 20px;

	ul {
		margin-bottom: 15px;

		li {
			display: flex;
			align-items: center;
			margin-top: 15px;

			.page-item-title {
				font-size: 14px;
				color: #333;
				margin-right: 10px;
			}

			.page-item-content {
				flex: 1;
			}

			.template-set {
				padding-left: 30px;
			}
		}
	}
}

// 头部信息
.header-info,
.main-info,
.footer-info {
	padding: 0 20px;

	div {
		&:first-child {
			.el-checkbox {
				margin-right: 5px;
				margin-left: 5px;
				margin-top: 8px;
			}
		}
	}
}
.footer—info-defind,
.main—info-defind {
	padding: 5px 0;
	margin-left: 5px;
	.el-tag {
		display: block;
		width: 300px;
		margin-bottom: 5px;
	}
}

// 主体部分信息
.guide-line {
	margin-top: 10px;

	.item {
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-bottom: 10px;

		.guide-line-title {
			font-size: 16px;
		}

		.item-content {
			display: flex;
			flex-direction: row;
			align-content: center;

			.input-box {
				display: flex;
				align-content: center;

				span {
					display: inline-block;
					padding: 2px 0px 2px 3px;
					border-radius: 0 5px 5px 0;
					height: 30px;
					line-height: 26px;
					box-sizing: border-box;
					width: 40px;
					border: 1px solid #cccccc;
					font-size: 14px;
					background-color: #ccc;
				}

				input[type="number"] {
					margin-left: 15px;
					padding: 2px 0px 2px 13px;
					border-radius: 5px 0 0 5px;
					height: 30px;
					box-sizing: border-box;
					width: 70px;
					border: 1px solid #cccccc;

					&:focus {
						outline: none;
					}
				}
			}
		}

		select {
			padding: 2px 3px;
			border-radius: 5px;
			height: 30px;
			box-sizing: border-box;
			border-style: none;
			border: 1px solid #cccccc;

			&:hover {
				border: 1px solid $main-color1;
			}

			&:focus {
				outline: none;
			}
		}
	}
}

// 自定义字段信息
.user-defind {
	padding: 10px 20px;
	margin-bottom: 50px;

	.el-tag {
		display: block;
		width: 300px;
		margin-bottom: 15px;
	}
}
.button {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	padding-top: 15px;
	.el-button {
		width: 110px;
		height: 40px;
		font-size: 18px;
	}
}
</style>
